<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String contextPath = request.getContextPath();
%>
<html>
<head lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="<%=contextPath%>/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=contextPath%>/static/css/bootstrap-theme.min.css">
    <style>
        body {
            padding-top: 50px;
        }

        .gtd-strategy {
            padding: 40px 15px;
            text-align: center;
        }

        /*.row {
            margin-top: 20px;
        }

        .row .row {
            margin-top: 10px;
            margin-bottom: 0px;
        }

        [class*="col-"] {
            padding-top: 15px;
            border: 1px red solid;
        }*/
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">MY GTD</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Center</a></li>
                <li><a href="#">Affair</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">Knowledge</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">

    <div class="gtd-strategy">
        <h1>阶段</h1>
        <small>规划</small>
        <p class="lead">
            第一阶段
            第二阶段
            第三阶段
            第四阶段
        </p>

        <p class="text-left">文本居左</p>
        <p class="text-center">文本居中</p>
        <p class="text-right">文本居右</p>
        ABC==>转小写<p class="text-lowercase">ABC</p>
        abc==>转大写<p class="text-uppercase">abc</p>
        abc==>首字母大写<p class="text-capitalize">abc</p>


    </div>

    <div class="container">
        <div class="btn-group">
            <button class="btn btn-default">Left</button>
            <button class="btn btn-default">Middel</button>
            <button class="btn btn-default">Rigth</button>
        </div>
    </div>

    <div class="container">
        <div class="btn-group">
            <button class="btn btn-default">Left</button>
            <button class="btn btn-default">Middel</button>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    下拉菜单
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                    <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li><a href="#" role="menuitem">A</a></li>
                <li><a href="#" role="menuitem">B</a></li>
                <li><a href="#" role="menuitem">C</a></li>
            </ul>
        </div>
    </div>

    <div class="container">
        <button class="btn btn-default">default</button>
        <button class="btn btn-success">success</button>
        <button class="btn btn-info">info</button>
        <button class="btn btn-primary">primary</button>
        <button class="btn btn-link">link</button>
        <button class="btn btn-warning">warning</button>
        <button class="btn btn-danger">danger</button>
    </div>

    <div class="container">
        <button class="btn btn-default btn-lg">default</button>
        <button class="btn btn-default btn-sm">default</button>
        <button class="btn btn-default btn-xs">default</button>
        <button class="btn btn-default">default</button>
    </div>

    <div class="container">
        <form role="form" class="form-horizontal">
            <div class="form-group">
                <label class="col-md-2">用户名</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" placeholder="用户名"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2">密码</label>
                <div class="col-md-10">
                    <input type="password" class="form-control" placeholder="密码"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2">学校</label>
                <div class="col-md-10">
                    <select name="selSchool" id="selSchool" class="form-control">
                        <option value="0">北大</option>
                        <option value="1">清华</option>
                        <option value="2">复旦</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="sr-only col-md-2">选择头像</label>
                <div class="col-md-10">
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10 col-md-offset-2">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">记住密码
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10 col-lg-offset-2">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">col-md-6,col-md-offset-3</div>
        </div>
        <div class="row">
            <div class="col-md-9 col-lg-push-3">col-md-9</div>
            <div class="col-md-3 col-lg-pull-9">col-md-3</div>
        </div>

    </div>

    <div class="container">

        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>

            </tbody>
        </table>
    </div>

</div>


<script src="<%=contextPath%>/static/js/jquery.min.js"></script>
<script src="<%=contextPath%>/static/js/bootstrap.min.js"></script>
</body>
</html>
